import React, { Suspense } from 'react'
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
import { routes } from './router_config'

const renderRouter = (routes) => {
    return routes.map((item, index) => {
        return <Route
            key={index}
            path={item.path}
            element={item.to ? <Navigate to={item.to} /> : <item.element />}
        >
            {
                item.children && renderRouter(item.children)
            }
        </Route>
    })
}
function Router_view({ }) {
    return <Suspense fallback={<>loading....</>}>
        <BrowserRouter>
            <Routes>
                {
                    routes && renderRouter(routes)
                }
            </Routes>
        </BrowserRouter>
    </Suspense>


}

export default Router_view